<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>实习列表页</title>
    <link href="/css/header_and_nav.css" rel="stylesheet">
    <link href="/css/internship_detail.css" rel="stylesheet">
    <link href="/css/list.css" rel="stylesheet">
    <script src="/js/marked.js"></script>
</head>
<body>
    <header th:include="header :: copy"></header>
    <nav th:include="nav :: my_nav" class="my_nav"></nav>
    <div class="container">
        <div class="three_buttons">
            <span><a href="/internshipList.do" class="back-link">返回</a></span>
            <span class="skill_button">
                <button class="my_list_button" id="updateInternship">修改</button>
                <form action="/internshipDelete.do" method="post">
                    <input type="hidden" name="id" th:value="${internship.id}">
                    <button type="submit" class="my_delete_button">删除</button>
                </form>
            </span>
        </div>
        <div class="internship_detail_info">
            <h2> <span th:text="${internship.company}"></span> </h2>
            <div class="internship_detail_time">
                <span th:text="${internship.startTime}"></span>
                <span>至</span>
                <span th:text="${internship.endTime}"></span>
            </div>
            <div class="internship_detail_description">
                <span th:text="${internship.description}" id="content"></span>
            </div>
        </div>
    </div>
    <div class="modal" id="updateInternshipModal">
        <div class="modal_content">
            <span class="close">&times;</span>
            <form action="/internshipUpdate.do" method="post">
                <input type="hidden" name="id" th:value="${internship.id}">
                <label>公司名称：</label>
                <input type="text" name="company" th:value="${internship.company}">
                <label>实习时间：</label>
                <input type="text" name="start" th:value="${internship.startTime}">
                <label>至</label>
                <input type="text" name="end" th:value="${internship.endTime}">
                <label>实习描述：</label>
                <textarea name="description" rows="4" cols="50" th:text="${internship.description}"></textarea>
                <button class="my_list_button" type="submit">修改</button>
            </form>
        </div>
    </div>
    <script>
        var updateInternshipModal = document.getElementById('updateInternshipModal');
        var updateInternship = document.getElementById('updateInternship');
        var close = document.getElementsByClassName('close')[0];
        updateInternship.onclick = function () {
            updateInternshipModal.style.display = 'block';
        }
        close.onclick = function () {
            updateInternshipModal.style.display = 'none';
        }

        window.onclick = function (event) {
            if (event.target === updateInternshipModal) {
                updateInternshipModal.style.display = 'none';
            }
        }
    </script>
    <script>
        document.getElementById('content').innerHTML = marked(document.getElementById('content').innerText);
    </script>
</body>
</html>
